<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h1{
            text-align: center;
        }
        table{
            width: 1000px;
            margin: auto;
            text-align: center;
            border-collapse: collapse;
        }
        th{
            color: white;
            background-color: rgb(252, 114, 9);
        }
        td{
            background-color: rgb(255, 212, 220);
        }
        th,td{
            border: 1px solid white;
            height: 50px;
        }
        .box{
            margin: 20px auto;
            width: 710px;
        }
        .t1{
            border-radius: 20px 0 0 0 ;
        }
        .t2{
            border-radius: 0 20px 0 0;
        }
    </style>
</head>
<body>
    <h1>订单详情页面</h1>
    <div class="box">
    <input type="text" placeholder="输入商品名称">
    <input type="text" placeholder="输入商品价格">
    <input type="text" placeholder="输入商品数量">
    <input type="text" placeholder="输入收货地址">
    <button onclick="add()">添加</button>
    </div>
    <table>
        <thead>
            <th class="t1">商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th class="t2">收货地址</th>
        </thead>
        <tbody>
            <!-- <tr>
                <td>小米青春版PLUS</td>
                <td>888元</td>
                <td>100</td>
                <td>88800元</td>
                <td>北京市海淀区中关村街道</td>
            </tr> -->
        </tbody>
    </table>
</body>
</html>
<script>
    var ipts=document.querySelectorAll('input');
    var tbody=document.querySelector('tbody');

    function cun(arr){
        localStorage.setItem('data',JSON.stringify(arr));
    }
    function qu(){
        var a=localStorage.getItem('data');
        if(a!=null){
            return JSON.parse(a);
        }else{
            return [];
        }
    }

    function add(){
        var arr=qu();
        arr.push({
            'name':ipts[0].value,
            'price':ipts[1].value,
            'num':ipts[2].value,
            'address':ipts[3].value,
        });
        cun(arr);
        xr();
    }
    function xr(){
        tbody.innerHTML='';
        var arr=qu();
        for(var i=0;i<arr.length;i++){
            var tr=document.createElement('tr');
            tr.innerHTML=`
                <td>${arr[i].name}</td>
                <td>${arr[i].price}元</td>
                <td>${arr[i].num}</td>
                <td>${arr[i].price*arr[i].num}元</td>
                <td>${arr[i].address}</td>
            `;
            tbody.appendChild(tr);
        }
    }
    xr();
</script>